<%--
  Created by IntelliJ IDEA.
  User: 野兔瑞贝卡
  Date: 2022/5/12
  Time: 14:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>员工管理</title>
</head>
<title>员工管理</title>
<link rel="stylesheet" href="../../style/bootstrap/css/bootstrap.min.css">
<script src="../../style/vue.js"></script>
<script src="../../style/jquery3.6.js"></script>
<script src="../../style/bootstrap/js/bootstrap.bundle.min.js"></script>
<body>
<div id="webApp">
    <div id="tool-div">
        名字:<input v-model="searchParam.userName">
        部门:<select v-model="searchParam.departId">
        <option value="">请选择</option>
        <option v-for="d in departs" :value="d.departId">{{d.departName}}</option>
    </select>
        性别:<input type="radio" v-model="searchParam.gender" name="gender" value="1" >男
        <input type="radio"  v-model="searchParam.gender" name="gender" value="2">女
        状态:<select v-model="searchParam.userState">
        <option value="">请选择</option>
        <option v-for="u in userState" :value="u.userStateId">{{u.userStateName}}</option>
    </select>
        <button @click="search" class="btn btn-success">搜索</button>
        <button style="margin-left: 50px" @click="delUserInfo" class="btn btn-danger">删除</button>

        <button style="margin-left: 20px" onclick="location.href='../../exportUserInfo'" class="btn btn-light">导出</button>
        <form id="upFile-form">
            <input type="file" name="upFile">
        </form>
        <button style="margin-left: 20px"  @click="upFile" class="btn btn-light">导入</button>


    </div>
    <div>
        <table class="table table-hover">
            <thead>
            <tr>
                <th><input type="checkbox"></th>
                <th>id</th>
                <th>名字</th>
                <th>部门</th>
                <th>性别</th>
                <th>角色</th>
                <th>状态</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="u in page.list">
                <td><input v-model="checkData" type="checkbox" :value="u.userId"></td>
                <td>{{u.userId}}</td>
                <td>{{u.userName}}</td>
                <td>{{u.departInfo.departName}}</td>
                <td>{{u.gender == 1 ? "男":"女"}}</td>
                <td>{{u.roleId}}</td>
                <td>{{u.userState.userStateName}}</td>
            </tr>
            </tbody>
        </table>
        <ul class="pagination">
            <li class="page-item" @click="toPage(1)"><a class="page-link" href="#">首页</a></li>
            <li class="page-item" v-if="page.page-1 > 0 " @click="toPage(page.page-1)"><a class="page-link" href="#">{{page.page-1}}</a></li>
            <li class="page-item active" ><a class="page-link" href="#">{{page.page}}</a></li>
            <li class="page-item" v-if="page.page+1 < page.total "  @click="toPage(page.page+1)"><a class="page-link" href="#">{{page.page+1}}</a></li>
            <li class="page-item" @click="toPage(page.total)"><a class="page-link" href="#">尾页</a></li>
        </ul>
    </div>
</div>
<script>
    //创建vue数据
    const webApp = {
        data() {
            return {
                departs:selDepart(),//部门列表
                userState:selUserState(),//状态列表
                page:selUserInfo(null,1,5),//加载员工列表
                checkData:[],//选中的数据
                searchParam:{//条件查询对象
                    departId:"",
                    userState: ""
                }

            }
        },
        methods:{
            toPage:function (page){//分页
                this.page = selUserInfo(this.searchParam, page,5);
            },
            search:function (){//条件查询
                this.page = selUserInfo(this.searchParam, 1,5);
            },
            delUserInfo:function () {//删除员工信息
                let userInfoIds = this.checkData.join(",");
                $.ajax({
                    type:"post",
                    url:"../../delUserInfo",
                    data:{"userInfoIds":userInfoIds},
                    dataType:"json",
                    success:function (json){
                        if (json.code == 1){
                            console.log(json.message);
                        }

                    }
                })
            },
            upFile:function (){//导入
                $.ajax({
                    url:"../../importUserInfo",
                    //jquery对象转js对象 $("#id")[0]
                    //js对象转jQuery对象$(document.getElementById("id"))
                    data:new FormData($("#upFile-form")[0]),
                    type:"post",
                    //告诉jQuery不要去处理法是的数据，用于对data参数进行序列化处理
                    processData:false,
                    //告诉jQuery不要去设置Content-Type请求头
                    contentType:false,
                    dataType:"json",
                    success:function (json){
                        console.log(json.message);

                    }
                });
            }
        }
    }
    //挂载vue
    let MyVue = Vue.createApp(webApp).mount('#webApp');

    //加载员工列表  param:查询条件  page 、limit：分页
    function selUserInfo(param,page,limit){
        if (param == null) param = {};
        param.page = page;
        param.limit = limit;
        let map;
        $.ajax({
            type:"post",
            url:"../../selUserInfo",
            data:param,
            dataType:"json",
            async:false,
            success:function (json){
               console.log(json)
                map = json;
            }
        })
        return map;
    }


    //加载部门列表
    function selDepart(){
        let list;
        $.ajax({
            type:"post",
            url:"../../selDepartInfo",
            dataType:"json",
            async:false,
            success:function (json){
                list = json;
            }
        })
        return list;
    }

    //加载状态列表
    function selUserState(){
        let list;
        $.ajax({
            type:"post",
            url:"../../selUserState",
            dataType:"json",
            async:false,
            success:function (json){
                list = json;
            }
        })
        return list;
    }
</script>
</body>
</html>
